<template>
    <div class="son10">
        <h3>SonDemo10</h3>
        <p>tle: {{ tle }}</p>
        <p> user: {{ user }}</p>
        <p>msg: {{ msg }}</p>

        <button type="button"
            @click="() => { emit('sonEmit', 10, '字符串啦啦', { name: '大强' }) }">emit触发父组件绑定子组件上的函数</button>
        <button type="button" @click="editTitle">修改title的值</button>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

export interface Iuser {
    name: string
    sex: string
    age: number
}

const {
    title = '子组件默认的标题',
    user,
    msg
} = defineProps<{
    title?: string
    user: Iuser
    msg?: string
}>()

const tle = ref(title)
const emit = defineEmits(['sonEmit', 'sonEmit2'])
const editTitle = () => {
    tle.value = '子组件新的标题'
    emit('sonEmit2')
}

</script>

<style lang="scss" scoped>
.son10 {
    border: 3px solid deepskyblue;
    padding: 10px;
    margin: 10px;
}
</style>